<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<style>
    
</style>
<body style="padding: 15px;">


    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">图书管理系统</h3>
        </div>
        <div class="panel-body form-inline">

            <div class="input-group">
                <div class="input-group-addon">图书</div>
                <input type="text" class="form-control bookname" id="exampleInputAmount" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control author" id="exampleInputAmount" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control publisher" id="exampleInputAmount" placeholder="请输入出版社">
            </div>
            <button type="button" class="btn btn-primary add">添加</button>
            <input type="text" class="form-control shuming" id="exampleInputAmount" placeholder="请输入书名查找书籍">
            <button type="button" class="btn btn-primary select">查找</button>
        </div>



    </div>


    <!-- 图书列表 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb"> 
        </tbody>
    </table>
    <div class="alert alert-warning alert-dismissible selectDIV" role="alert">
        <strong>根据书名查询到的信息:</strong>
      </div>

</body>
<script src="./lib/jquery.js"></script>
<script>
    // 渲染图书列表
    // 定义一个函数 **getBooklist**
    // 发送ajax请求
    // 查看状态码
    // 遍历数组,拼接字符串
    // 将数组转换成字符串 写入tbody中
    // 调用 **getBooklist** 函数
    function getBooks() {
        $.get('http://www.liulongbin.top:3006/api/getbooks', res => {
            const { status, msg, data } = res
            if (status !== 200) return alert(msg)
            let arr = []
            data.forEach(item => {
                arr.push(
                    `
                    <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td>
                    <a href="JavaScript:;" class="del" data-id="${item.id}">删除</a>
                </td>
            </tr>`
                )
            });
            $('#tb').html(arr.join(''))
        })
    }
    getBooks()

    // 添加操作
    $('.add').on('click', function () {
        const bookname = $('.bookname').val().trim()
        const author = $('.author').val().trim()
        const publisher = $('.publisher').val().trim()
        if (bookname.length == 0 || author.length == 0 || publisher.length == 0) {
            return alert('臭宝!输入内容哦!')
        }
        $.post('http://www.liulongbin.top:3006/api/addbook', { bookname, author, publisher }, res => {
            const { status, msg } = res
            if (status === 201) {
                getBooks()
            } else {
                alert(msg)
            }
        })
    })

    // 1. 给删除按钮绑定点击事件 需要采用事件委托 委托给 `tbody`
    // 2. 通过给删除按钮设置class来注册事件
    // 3. 给每一个a标签添加一个自定义属性,方便获取id
    // 4. 删除时提示用户 是否确认删除? comfirm{}
    // 5. 
    $("#tb").on('click', '.del', function () {
        const id = $(this).attr('data-id')
        if (window.confirm('确认删除吗?')) {
            $.get('http://www.liulongbin.top:3006/api/delbook', { id }, res => {
                console.log(res);
                const { status, msg } = res
                if (status !== 200) {
                    return alert(msg)
                } else {
                    getBooks()
                }
            })
        }
    })


    // 按照书名查找书籍

    $('.select').on("click", function () {
        let bookname = $('.shuming').val().trim()
        if (bookname == 0) {
            $('.selectDIV').html('<strong>根据书名查询到的信息:</strong>  查不到没有名字的书')
        } else {
            $.get('http://www.liulongbin.top:3006/api/getbooks', { bookname }, res => {
                if (res.data.length == 0) {
                    $('.selectDIV').html('<strong>根据书名查询到的信息:</strong>  没有找到这本书')
                } else {
                    $('.selectDIV').html(`<strong>根据书名查询到的信息:</strong>  <strong>书名:</strong> ${res.data[0].bookname}  <strong>作者:</strong> ${res.data[0].author}  <strong>出版社:</strong> ${res.data[0].publisher}`)
                }
                //  $('.selectDIV').html(`书名:${res.data[0].bookname},作者:${res.data[0].author},出版社:${res.data[0].publisher}`)
            })
        }
    })



</script>

</html>